<template>
	<view>
		<view class="topbg">
			
		</view>
		<view class="content margin-bottom">
			<view class="margin-sm panel top-50">
				<view style="color:#4CA5FE;">基金报销工伤金额合计（测算结果只做参考）</view>
				<!-- 一般用法 -->
				<uni-collapse >
				    <uni-collapse-item title="金额合计" :subTitle="resultList.fund_total" :open="true">
						<view class="cu-list menu">
							<view class="cu-item " v-for="(item,index) in resultList.fund" :key="index">
								<view class="content">
									<text class="">{{item.name}}</text>
								</view>
								<view class="action"><text class=" text-sm">{{item.value}}</text></view>
							</view>
						</view>
				    </uni-collapse-item>
				   
				</uni-collapse>
				
				
			</view>
			<view class="margin-sm panel top-100">
				<view style="color: #4CA5FE;">公司需支付工伤金额合计（测算结果只做参考）</view>
				<uni-collapse >
					
				    <uni-collapse-item title="金额合计" :subTitle="resultList.company_total" :open="true">
						<view class="cu-list menu">
							<view class="cu-item " v-for="(item,index) in resultList.company" :key="index">
								<view class="content">
									<text class="">{{item.name}}</text>
								</view>
								<view class="action"><text class=" text-sm">{{item.value}}</text></view>
							</view>
						</view>
				    </uni-collapse-item>
				   
				</uni-collapse>
			</view>
			<view class="imgBottom">
				<view class="imgContent ">
					<image src="https://apitest.hrzhizhang.com/file/2020-11-27/qrcode.jpg" class="myCode" show-menu-by-longpress="true"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	
	export default {
	    components: {uniCollapse,uniCollapseItem},
		data() {
			return {
				resultList:[],
				
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		onLoad() {
			this.getResult();
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			async getResult(){
				let param = uni.getStorageSync('injuryParam') ;
				console.log(param);
				// let data = await this.$http.post('fiveRisks',{city:'重庆市',wages_before:'10000',wages_real:'6000'});
				let data = await this.$http.post(
					'injury', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				this.resultList = data;
				console.log(data);
			},
		}
	}
</script>

<style  lang="less">
	.page {
		height: 100Vh;
		width: 100vw;
		background: #F6F6F6;
		
		
	}
	.topbg{
		height: 20px;
		widows: 100%;
		/* background-color: #F6F6F6 !important; */
	}
	
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 0;
		
	}
	.cu-list.menu>.cu-item {
		height: 48px;
		background-color: transparent !important;
		color: rgba(22, 118, 214, 0.62);
	}
	.border-top{
		border-top: 1rpx solid gray;
	}
	.line{
		border-top: 2rpx solid lightgray;
	}
	.result-list{
		background: #FE4C4C !important;
		box-shadow: 0px 3px 6px rgba(142, 228, 255, 0.12);
		opacity: 0.8;
		
	}
	.result-list>.cu-item {
		color: #FFFFFF !important;
	}
	
	.cu-list{
		background: rgba(113, 191, 251, 0.08);
		border-radius: 10px;
	}
	
	.panel{
		background: #FFF;
		padding: 5px 10px;
		border-radius: 6px;
	}
	.page.show {
		overflow: hidden;
	}
	.bottom-img{
		position: fixed;
		bottom: 0;
		height: 100px;
		width: 100%;
	}
	.bg{
		width: 100%;
	}
	.margin-bottom{
		margin-bottom: 120px;
	}
	.result{
		height: 48px;
		line-height: 48px;
		font-size: 16px;
	}
	.imgBottom{
		height: 150px;
	}
	.imgContent{
		height: 100px;
		padding: 0;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 10px;
		margin: 10px 5%;
		width: 90%;
	}
	.myCode{
		width: 100%;
		height: 100px;
	}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
